<script setup lang="ts">
import { loginByPasswordApi } from '@/apis/user';
import { ref } from 'vue';
import { useUserStore } from '@/store/user';

const store = useUserStore()

const formData = ref({
    mobile:'',
    password:''
})

const formRules = {
    mobile: {
        rules: [
            { required: true, errorMessage: '请填写手机号码' },
            { pattern: '^1[3-9][0-9]{9}$', errorMessage: '手机号码格式不正确' },
        ],
    },
    password: {
        rules: [
            { required: true, errorMessage: '请输入密码' },
            { pattern: '^[a-zA-Z0-9]{8}$', errorMessage: '密码格式不正确' },
        ],
    },
}

const formRef = ref(null)
const isAgree = ref(false)
const onFormSubmit = async () => {
    try {
        // 验证通过后会返回表单的数据
        // @ts-ignore
        const formData = await formRef.value.validate()
        if (!isAgree.value) return uni.showToast({ title: '请勾选用户同意协议', icon: 'none' })
        // 提交表单数据
        const res = await loginByPasswordApi(formData)

        // 2.3 存储token
        store.token = res.token

        // 2.4 提示用户
        uni.showToast({ title: '登录成功', icon: 'success' })

        // 2.5 页面跳转(我的) --- switchTab
        uni.switchTab({
            url: '/pages/my/index'
        })
        console.log(res)
    } catch (error) {
        console.log(error)
    }
}
</script>
<template>
    <uni-forms class="login-form" ref="formRef" :model="formData" :rules="formRules">
        <uni-forms-item name="mobile">
            <uni-easyinput v-model="formData.mobile" :input-border="false" :clearable="false" placeholder="请输入手机号"
                placeholder-style="color: #C3C3C5" />
        </uni-forms-item>
        <uni-forms-item name="password">
            <uni-easyinput v-model="formData.password" type="password" placeholder="请输入密码" :input-border="false"
                placeholder-style="color: #C3C3C5" />
        </uni-forms-item>
        <view class="agreement">
            <radio :checked="isAgree" color="#16C2A3" @click="isAgree=!isAgree" />
            我已同意
            <text class="link">用户协议</text>
            及
            <text class="link">隐私协议</text>
        </view>

        <button class="uni-button" @click="onFormSubmit">登 录</button>
        <navigator hover-class="none" class="uni-navigator" url=" ">
            忘记密码？
        </navigator>
    </uni-forms>
</template>

<style lang="scss">
@import './styles.scss';
</style>